<template>
<view class="page-tickets-detail">
  <basic-nav-bar 
    left-icon="arrowleft" 
    title="门票" 
    statusBar
    :border="false" 
    :fixed="true">
  </basic-nav-bar>
  <!-- 轮播 -->
  <productSwiper :pictures="poiDetail.images" />

  <!-- 基本信息 -->
  <baseInfo
    :product="poiDetail" 
    @click:opentime="showIntroduction = true"/>
  
  <!-- 公告 -->
  <notice-bar
    v-if="poiDetail.scenicAreaNotice"
    :notice="poiDetail.scenicAreaNotice"
    @click="showAnnouncement = true" />

  <!-- sku列表 -->
  <list
    v-if="poiDetail.projectTypes"
    :products="poiDetail.projectTypes"
    @click:item="showSkuPopup"
    @click:booking="handleBooking"/>

  <basic-safe-area></basic-safe-area>

  <!-- 景区介绍 -->
  <basic-bottom-popover
    v-model="showIntroduction" 
    title="景区介绍" 
    :titleBorder="false">
    <intro :product="poiDetail"/>
  </basic-bottom-popover>

  <!-- 公告 -->
  <basic-bottom-popover
    v-model="showAnnouncement" 
    title="公告">
    <view class="announcement-content">
      <text>{{poiDetail.scenicAreaNotice}}</text>
    </view>
  </basic-bottom-popover>

  <!-- 套餐详情 -->
  <basic-bottom-popover
    v-model="showTicketSku" 
    :title="curSku.skuName">
      <skuDetail v-if="curSku.skuName" :detail="curSku" @click:booking="handleBooking"/>
  </basic-bottom-popover>
</view>
</template>
<script>
import baseInfo from './components/base-info'
import intro from './components/intro'
import list from './components/list'
import skuDetail from './components/sku-detail'
import productSwiper from '../../../components/product-swiper'
import noticeBar from '@/components/business/notice-bar'
import sdk from 'sdk'
import storage from 'utils/helper/storage'
import {getPoiDetail} from 'api'
export default {
  name: 'page-tickets-detail',
  components: { baseInfo, intro, noticeBar, productSwiper, list, skuDetail },

  data() {
    return {
      poiCode: '',
      poiDetail: {
        images: []
      },

      showIntroduction: false,
      showAnnouncement: false,
      showTicketSku: false,

      curProduct: {}, // 当前查看的套餐
      curSku: {} // 当前查看的sku
    }
  },

  onLoad(options) {
    this.getDetail(options)
  },

  methods: {
    getDetail(options) {
      let {code} = options

      if (!code) {
        uni.showToast({
          title: '无效的门票标识',
          icon: 'none',
          duration: '2000'
        })

        setTimeout(() => {sdk.navigateBack()}, 2000)

        return
      }

      this.poiCode = code

      getPoiDetail({poiCode: code}).then(res => {
        this.poiDetail = res.result
      }).catch(err => {
        uni.showToast({
          title: '获取门票信息失败，请稍后再试~~~',
          icon: 'none',
          duration: '2000'
        })

        setTimeout(() => {sdk.navigateBack()}, 2000)
      })
    },

    showSkuPopup(productIndex, skuIndex) {
      let productItem = this.poiDetail.projectTypes[productIndex]
      this.curSku = productItem.products[skuIndex]

      this.showTicketSku = true
    },


    handleBooking(productIndex = null, skuIndex = null) {
      if (productIndex !== null && skuIndex !== null) {
        let productItem = this.poiDetail.projectTypes[productIndex]
        this.curSku = productItem.products[skuIndex]
      }

      // 缓存当前商品信息
      storage.set('ticket_choose_sku', {
        poiCode: this.poiDetail,
        poiDetail: this.poiDetail,
        skuDetail: this.curSku
      })

      // 垃圾app存完localstorage不能立马打开新窗口
      setTimeout(() => {
        sdk.navigateTo({
          url: '/packageDetail/pages/tickets/choose-sku/index'
        })
      }, 0)
    }
  }
}
</script>
<style lang="less">
.page-tickets-detail {
  .announcement-content {
    padding: 30rpx;
    min-height: 800rpx;
    max-height: 1000rpx;

    color: #666666;
    line-height: 40rpx;
    text-align: justify;
  }
}
</style>